<template>
  <div class="cateLeft">
    <ul class="region">
      <li
        class="field"
        :class="activateId == item.maitKey ? 'activate' : ''"
        v-for="(item, index) in list"
        :key="index"
        @click="activate(item.maitKey)"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "CateLeft",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      activateId: "3627",
    };
  },
  methods: {
    activate(id) {
      this.activateId = id;
      this.$emit('id',id);
    },
  }
};
</script>

<style scoped>
.cateLeft {
  width: 30%;
  background-color: white;
  overflow: scroll;
}
.field {
  width: 100%;
  height: 50px;
  margin-bottom: 1px;
  text-align: center;
  background-color: WhiteSmoke;
  line-height: 50px;
  border-radius: -20px;
}
.region {
  width: 100%;
  height: calc(100% - 50px);
}
.activate {
  background-color: #ff5777;
  color: white;
}
</style>